<template>
  <div class="order-success">
    <header-template-phone>
      <template v-slot:left>
        <header-back></header-back>
      </template>
      <template v-slot:center>
        <div class="center-context">
          <span class="text">
            确认投注
          </span>
        </div>
      </template>
    </header-template-phone>
    <div class="content-wrapper">
      <div class="content">
        <div class="icon-wrapper">
          <div class="icon"></div>
        </div>
        <p class="hint">投注成功，预祝您中奖</p>
        <div class="lottery-info">
          <div class="info-item">
            当前投注彩种：<span>{{getLotteryType.lotteryName}}</span>
          </div>
          <div class="info-item">
            当前投注期数：<span>第{{getLotteryDateNo}}期</span>
          </div>
        </div>
        <button class="btn button-selected" @click="handleGoBack">
          确定
        </button>
      </div>
    </div>
  </div>
</template>

<script>

import HeaderTemplatePhone from '@/components/base/phone/header-template-phone/header-template-phone'
import HeaderBack from '@/components/base/header-back/header-back'
import { mapGetters, mapMutations } from 'vuex';
export default {
  components: {
    HeaderTemplatePhone,
    HeaderBack,
  },
  methods: {
    handleGoBack() {
      let id = this.getLotteryType.id 
      this.$router.push({path: '/select-number/' + id})
      this.clearLotteryState()
    },
    ...mapMutations('lottery', {
      clearLotteryState: 'CLEAR_STATE'
    })
  },
  computed: {
    ...mapGetters('lottery', ['getLotteryDateNo', 'getLotteryType'])
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl'
  .content-wrapper 
    .content 
      position fixed 
      display inline-block
      top 50%
      left 50%
      transform translate(-50%, -50%)
      text-align center
      .icon-wrapper 
        margin-bottom 36px 
        .icon
          margin 0 auto 
          width 80px 
          height 80px 
          border-radius 50% 
          background $color-ball-green 
          text-align center
      .hint 
        color $color-theme-red 
        font-size 28px 
        min-width 320px
      .lottery-info 
        margin-top 24px
        .info-item  
          font-size 20px 
          color $color-sub-grey 
          line-height 30px 
      .btn 
        width 240px 
        height 45px 
        font-size 20px 
        margin-top 20px 
          
</style>